<template>
  <view class="wrap">
    <view style="width: 750rpx">
      <u-tabs
        :list="list"
        :is-scroll="isScroll"
        :current="current"
        @change="tabsChange"
        active-color="#18C7E1"
        swiperWidth="750"
        bar-width="200"
        bar-height="5"
      ></u-tabs>
    </view>
    <view v-show="current == 0" class="ltr">
      <view v-for="(item, index) in wList" :key="item.id" class="dbox">
        <view class="item-content" style="width: 100%">
          <view
            class="flex flex-j-b flex-al-c uni-item-line"
            style="padding: 0 0 30upx"
          >
            <view class="flex flex-al-c">
              <view v-if="index == 0" style="font-size: 36upx; font-weight: 900"
                >孕前BMI</view
              >
              <view v-else style="font-size: 36upx; font-weight: 900">{{
                item.reTime | parseTime
              }}</view>
              <u-tag
                style="
                  right: 120upx;
                  top: 10rpx;
                  position: absolute;
                  border: none;
                "
                v-if="item.flag == '正常'"
                :text="item.flag"
                size="mini"
                color="#fff"
                bg-color="#3FB67A"
              ></u-tag>
              <u-tag
                style="
                  right: 120upx;
                  top: 10rpx;
                  position: absolute;
                  border: none;
                "
                v-if="item.flag == '偏低'"
                :text="item.flag"
                size="mini"
                color="#fff"
                bg-color="#E27126"
              ></u-tag>
              <u-tag
                style="
                  right: 120upx;
                  top: 10rpx;
                  position: absolute;
                  border: none;
                "
                v-if="item.flag == '偏高'"
                :text="item.flag"
                size="mini"
                color="#fff"
                bg-color="#FAB82B "
              ></u-tag>
            </view>
            <view class="flex flex-al-c" style="width: 270upx">
              <!-- <u-icon name="arrow-right" color="#999" size="28" style="margin-right: 60upx;"></u-icon> -->
              <u-icon
                name="edit-pen"
                @click="showEdits(item, index)"
                class="btns"
              ></u-icon>
            </view>
          </view>
          <view
            class="flex flex-al-c flex-j-b"
            style="padding: 30upx 0 0; width: 90%"
          >
            <view v-if="index != 0"> 孕周：孕{{ item.gestationalAge }}周</view>
            <view v-if="index == 0"> 身高：{{ item.height }}cm</view>
            <view> 体重：{{ item.weight }}KG</view>
            <view v-show="index == 0"> BMI：{{ item.bmi }}</view>
            <view v-show="index != 0"> 变化值：{{ item.weightZz }}</view>
          </view>
        </view>
      </view>
      <u-popup v-model="showEdit" mode="center">
        <view class="iconbox">
          <view class="edits" @click="click(idx)"
            >修改
            <u-icon name="edit-pen"></u-icon>
          </view>
          <view class="del" @click="del(idx)"
            >删除
            <u-icon name="minus-circle"></u-icon>
          </view>
        </view>
      </u-popup>
    </view>
    <view v-show="current != 0">
      <view class="qiun">
        <view class="sli">
          <span><i class="le"></i>体重增长</span>
        </view>
        <view class="qiun-charts" :style="{ width: charts.cWidth + 15 + 'px' }">
          <view class="tips">孕周</view>
          <canvas
            canvas-id="canvasLineA"
            id="canvasLineA"
            class="charts"
            :style="{ width: charts.cWidth + 'px' }"
            @touchstart="touchLineA"
            @touchmove="moveLineA"
            @touchend="touchEndLineA"
          ></canvas>
        </view>
      </view>
    </view>
    <view class="edit" @tap="goAddGraph">
      <u-icon name="edit-pen-fill" color="#fff" size="45"></u-icon>
    </view>
    <u-modal
      v-model="showConfirm"
      @confirm="confirm"
      @cancel="refres"
      ref="uModal"
      content="您暂未录入首次体重记录,请先录入首次体重记录？"
      :async-close="true"
      :show-cancel-button="true"
    ></u-modal>
  </view>
</template>

<script>
import { parseTime } from "@/utils/parseTime";
import uCharts from "@/js_sdk/u-charts/u-charts/u-charts.js";
var canvaLineA = null;
var _self;
export default {
  data() {
    return {
      showEdit: false,
      idx: "",
      showConfirm: false,
      firstadd: "", //是否首次进入
      jcfirst: false,
      list: [
        {
          name: "记录列表",
        },
        {
          name: "曲线记录",
        },
      ],
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      windowHeight: 800,
      wList: [],
      isScroll: false,
      charts: {
        cWidth: "",
        cHeight: "",
        pixelRatio: 1,
        dataee: {
          categories: [],
          series: [
            {
              name: "体重增长",
              data: [],
              color: "#18c7e1",
              pointShape: "circle",
            },
            {
              name: "上限",
              data: [],
              color: "rgba(215, 215, 215, 1.0)",
              lineType: "dash",
              pointShape: "none",
            },
            {
              name: "下限",
              color: "rgba(215, 215, 215, 1.0)",
              data: [],
              lineType: "dash",
              pointShape: "none",
            },
          ],
        },
      },
      options: [
        {
          text: "修改",
          style: {
            color: "#007aff",
            boxShadow: "-3px 0px 5px -2px #ededed",
          },
        },
      ],
      firstRecord: {},
    };
  },
  filters: {
    parseTime(time) {
      var date = new Date(time);
      return parseTime(time, "{y}-{m}-{d}");
    },
  },
  onLoad() {
    this.getRecord();
  },
  onShow() {
    this.showEdit = false;
    _self = this;
    this.charts.cHeight = uni.upx2px(1000);
    this.getRecord();
  },
  methods: {
    showEdits(index) {
      //修改
      this.idx = index;
      this.showEdit = true;
    },
    del(v) {
      //删除
      //console.log(v)
      this.config
        .post("/gravid/planGravidPrenatalCheck/delGravidRecord", {
          id: v.id,
        })
        .then((res) => {
          //console.log(res)
          if (res.data.code === 200) {
            this.showEdit = false;
            this.getRecord();
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: "none",
            });
          }
        });
    },
    firstNotice() {
      this.showConfirm = true;
    },
    confirm() {
      let first = this.firstadd;
      uni.navigateTo({
        url: "/pages/main/pregnant/weight-add?first=" + first,
      });
      this.showConfirm = false;
    },
    refres() {
      uni.redirectTo({
        url: "/pages/main/pregnant/weight-manage",
      });
    },
    getSysInfo() {
      let self = this;
      uni.getSystemInfo({
        success(res) {
          self.windowHeight = res.windowHeight;
        },
      });
    },
    // tabs通知swiper切换
    tabsChange(index) {
      this.current = index;
      this.isScroll = false;
      this.getRecord();
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    // scroll-view到底部加载更多
    onreachBottom() {},
    click(item) {
      //修改
      uni.navigateTo({
        url:
          "/pages/main/pregnant/weight-add?id=" +
          item.id +
          "&height=" +
          item.height +
          "&weight=" +
          item.weight +
          "&gestationalAge=" +
          item.gestationalAge,
      });
    },
    open(index) {
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      this.wList[index].isflag = true;
      this.wList.map((val, idx) => {
        if (index != idx) {
          val.isflag = false;
        }
      });
    },
    getRecord() {
      let self = this;
      let LineA = {
        categories: [],
        series: [],
      };
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/gravid/planGravidPrenatalCheck/getGravidQx", {})
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            if (typeof res.data.data === "undefined") {
              this.jcfirst = false;
              /* uni.showToast({
								title: '您暂未录入数据',
								icon: 'none'
							}); */
              this.firstNotice();
              this.firstadd = 0;
            } else {
              this.jcfirst = true;
              res.data.data.map((item) => {
                item.isflag = false;
              });
              self.wList = res.data.data;
              /* self.firstRecord = res.data.data[0]
							self.wList = res.data.data.slice(1) || []; */
            }
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .post("/gravid/planGravidPrenatalCheck/gravidQx", {})
        .then((res) => {
          uni.hideLoading();
          //console.log(res)
          if (res.data.code === 200) {
            // 重置数据
            self.charts.dataee.categories = [];
            self.charts.dataee.series[0].data = [];
            self.charts.dataee.series[1].data = [];
            self.charts.dataee.series[2].data = [];
            if (typeof res.data.data === "undefined") {
              /* uni.showToast({
								title: '您暂未录入数据',
								icon: 'none'
							}); */
            } else {
              let b = [];
              res.data.data.forEach((it) => {
                self.charts.dataee.categories.push(it.yz);
                // self.charts.dataee.series[0].data.push(it.weightZz)
                b.push(it.weightZz);
                self.charts.dataee.series[1].data.push(it.sx);
                self.charts.dataee.series[2].data.push(it.xx);
                //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
                LineA.categories = this.charts.dataee.categories;
                LineA.series = this.charts.dataee.series;
                self.showLineA("canvasLineA", LineA);
              });
              let bbb = "[";
              b.forEach(function (item) {
                if (item == 0) {
                  bbb += ",";
                } else {
                  bbb += item + ",";
                }
              });
              bbb = bbb.substr(0, bbb.length - 1) + "]";
              self.charts.dataee.series[0].data = eval(bbb);

              let idx = self.charts.dataee.categories.length * 40 * 2;
              this.charts.cWidth = uni.upx2px(idx);
            }
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    goAddGraph() {
      uni.navigateTo({
        url: "/pages/main/pregnant/weight-add",
      });
    },
    showLineA(canvasId, chartData) {
      canvaLineA = new uCharts({
        $this: _self,
        canvasId: canvasId,
        type: "line",
        fontSize: 11,
        legend: {
          show: false,
        },
        // dataPointShape: true,
        dataLabel: false,
        background: "#FFFFFF",
        pixelRatio: _self.charts.pixelRatio,
        categories: chartData.categories,
        series: chartData.series,
        animation: true,
        xAxis: {
          type: "grid",
          gridColor: "#f4f4f4",
          gridType: "dash",
          dashLength: 5,
          boundaryGap: "center",
          name: "孕周",
        },
        yAxis: {
          gridType: "dash",
          gridColor: "#f4f4f4",
          axisLineColor: "#ffffff",
          dashLength: 2,
          splitNumber: 10,
          min: 0,
          max: 20,
        },
        width: _self.charts.cWidth * _self.charts.pixelRatio,
        height: _self.charts.cHeight * _self.charts.pixelRatio,
        extra: {
          line: {
            type: "curve",
            width: "1px",
          },
          length: {
            position: "top",
          },
          tooltip: {
            bgOpacity: 0.5,
          },
        },
      });
    },
    touchLineA(e) {
      canvaLineA.scrollStart(e);
      /* canvaLineA.showToolTip(e, {
								format: function(item, category) {
									return category + '月龄' + item.name + '：' + item.data
								}
							}); */
    },
    touchEndLineA(e) {
      canvaLineA.showToolTip(e, {
        format: function (item, category) {
          return category + "孕周" + item.name + "：" + item.data;
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
  margin-bottom: 30rpx;
  position: fixed;
  background-color: #fff;
}

.swiper-box {
  flex: 1;
}

.swiper-item {
  height: 100%;
}

.ltr {
  overflow-y: scroll;
}

.box {
  width: 100%;
  height: 100%;
  background-color: #eee;
  padding-top: 1upx;
}

.edit {
  width: 120upx;
  height: 120upx;
  border-radius: 50%;
  background-color: #84e1ef;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 10%;
  bottom: 20%;
  position: fixed;
}

.qiun-charts {
  margin-top: 60rpx;
  height: 1000rpx;
  position: relative;
}

.tips {
  position: absolute;
  right: 8rpx;
  color: #c9c9c9;
  font-size: 13px;
  bottom: 16rpx;
}

.charts {
  height: 1000rpx;
}

.qiun {
  // padding-top: 40rpx;
  background-color: #ffffff;
  overflow: scroll;

  .sli {
    padding: 20rpx;
    position: fixed;

    .le {
      width: 20rpx;
      height: 20rpx;
      display: inline-block;
      border-radius: 50%;
      background-color: #18c7e1;
      margin: 0 20rpx 0 5rpx;
    }
  }
}

.dbox {
  -webkit-animation-name: fadeIn;
  /*动画名称*/
  -webkit-animation-duration: 0.3s;
  /*动画持续时间*/
  -webkit-animation-iteration-count: 1;
  /*动画次数*/
  -webkit-animation-delay: 0s;
  /*延迟时间*/
  margin: 30rpx 10px 10px;
  padding: 30rpx;
  border-radius: 15upx;
  box-shadow: 0 0 10upx 0 #ccc;
  overflow: hidden;
}

.edits {
  padding: 20rpx;
  color: #ffffff;
  line-height: 20rpx;
  border-radius: 10rpx;
  background-color: #18c7e1;
  width: 270rpx;
  text-align: center;
}

.del {
  margin-top: 20rpx;
  padding: 20rpx;
  color: #ffffff;
  background-color: #fd6666;
  line-height: 20rpx;
  border-radius: 10rpx;
  width: 270rpx;
  text-align: center;
}

.iconbox {
  margin: 66rpx 36rpx;
}

.btns {
  position: absolute;
  right: 18rpx;
  bottom: 6rpx;
  font-size: 32px;
  color: #84e1ef;
}
</style>
